<template>
  <div id="app">
    <!--面包屑-->
    <div class="bread" style="width: 100%;height: 30px;">
      <div class="bread_content" style="margin: auto">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>培训通后台管理</el-breadcrumb-item>
          <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

    </div>
    <!--列表展示-->
    <div style="width: 100%;height: 520px;background-color: white;padding-top: 20px">
      <div style="width: 1200px;height: 430px;margin: auto;">
        <!--添加课程-->
        <div class="add_content">
          <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加课程</el-button>
        </div>
        <!--展示界面-->
        <div class="table">
          <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
            <el-table-column prop="id" label="课程编号" width="100"></el-table-column>
            <el-table-column label="图片" width="120px">
              　　<template slot-scope="scope">
              　　　　<img :src="'static/Course_img/'+scope.row.img" width="40" height="40" class="head_pic"/>
              　　</template>
            </el-table-column>
            <el-table-column prop="title" label="课程名称" width="220"></el-table-column>
            <el-table-column prop="school" label="机构名称" width="150px"></el-table-column>
            <el-table-column prop="phone" label="联系方式" width="120px"></el-table-column>
            <el-table-column prop="adress" label="机构地址" width="100px"></el-table-column>
            <el-table-column prop="memo" label="备注" width="100px"></el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--分页-->
      <div style="margin-left: 23px;margin-top: 30px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="tableData.length">
        </el-pagination>
      </div>
    </div>
    <!--添加页面-->
    <el-dialog title="输入信息" :visible.sync="dialogFormVisible">
      <el-form :model="Course">
        <el-form-item label="课程名称：" :label-width="formLabelWidth">
          <el-input v-model="Course.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="机构名称：" :label-width="formLabelWidth">
          <el-input v-model="Course.school" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程电话：" :label-width="formLabelWidth">
          <el-input v-model="Course.phone" autocomplete="off"></el-input>
        </el-form-item>
        <!--文件上传-->
          <el-form :model="form">
            <el-form-item label="上传文件：" :label-width="formLabelWidth">
              <el-upload ref="uploadDemo" action="http://localhost:8066/course/elupload" :auto-upload="false" multiple
                         :file-list="fileList">
                <el-button size="small" type="primary">选择文件</el-button>
              </el-upload>
            </el-form-item>
<!--              <el-button size="small" type="primary" @click="uploadFile()">立即上传</el-button>-->
          </el-form>

        <el-form-item label="机构地址：" :label-width="formLabelWidth">
          <el-input v-model="Course.adress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input v-model="Course.memo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse()">添 加</el-button>
      </div>
    </el-dialog>


    <!--修改信息界面-->
    <el-dialog  title="修改信息" :visible.sync="updateFormVisible">
      <el-form :model="Inform">
        <el-form-item label="课程名称：" :label-width="formLabelWidth">
          <el-input v-model="Inform.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="机构名称：" :label-width="formLabelWidth">
          <el-input v-model="Inform.school" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程电话：" :label-width="formLabelWidth">
          <el-input v-model="Inform.phone" autocomplete="off"></el-input>
        </el-form-item>
        <!--文件上传-->
        <el-form :model="form">
          <el-form-item label="上传文件：" :label-width="formLabelWidth">
            <el-upload ref="uploadDemo" action="http://localhost:8066/course/elupload" :auto-upload="false" multiple
                       :file-list="fileList">
              <el-button size="small" type="primary">选择文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form-item label="机构地址：" :label-width="formLabelWidth">
          <el-input v-model="Inform.adress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input v-model="Inform.memo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCourse()">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      name: "CourseAdmin",
      data() {
        return {
          dialogFormVisible: false,//添加页面
          updateFormVisible:false,//修改页面
          currentPage:1, //初始页
          pageSize:5,    //每页的数据
          Course:{},  //添加中转站
          Inform:{},//查询的单个存储
          tableData: [{}],
          /*图片上传代码，勿动*/
          formLabelWidth: '100px',
          form: {file: ''},
          fileList: []
        }
      },
      methods:{
        /*图片上传方法*/
        // uploadFile() {
        //   this.$refs.uploadDemo.submit()
        //   alert("图片上传成功！")
        //   console.log(this.$refs.uploadDemo.uploadFiles[0].name)
        // },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pagesize = size;
          console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
          console.log(this.currentPage)  //点击第几页
        },
        /*查询所有课程*/
        findAll(){
          let _this = this
          this.$axios.get("http://localhost:8066/course/getCourse").then(function(res){
            _this.tableData = res.data
            console.log(res.data)
          }).catch(function (err) {
            alert('查询失败')
          })
        },
        /*添加课程*/
        addCourse(){
          if(!this.Course.title){alert('请输入课程名称');return false}
          if(!this.Course.school){alert('请输入机构名称');return false}
          if(!this.Course.phone){alert('请输入电话');return false}
          if(!this.$refs.uploadDemo.uploadFiles[0].name){alert('请上传文件！');return false}
          if(!this.Course.adress){alert('请输入机构地址');return false}
          if(!this.Course.memo){alert('请输入角色备注');return false}
          this.$refs.uploadDemo.submit()
          this.Course.img = this.$refs.uploadDemo.uploadFiles[0].name
          console.log(this.Course)
          let _this = this
          this.$axios.post("http://localhost:8066/course/setCourse",this.Course).then(function () {
            //清空本次保存数据
            alert("课程信息添加成功！")
            _this.Course = {};
            _this.dialogFormVisible = false
            _this.findAll();
          }).catch(function (err) {
            alert("课程信息添加失败，请稍后再试")
          })
        },
        /*根据id查询课程*/
        handleEdit(id){
          this.updateFormVisible=true
          let _this = this
          this.$axios.get("http://localhost:8066/course/getCourseById/"+id).then(function(res){
            _this.Inform = res.data
          }).catch(function (err) {
            alert('查询失败')
          })
        },
        /*更新课程*/
        updateCourse(){
          let _this = this
          // 发送axios请求，根据查询一个
          console.log("!"+ _this.Inform)
          this.$axios.post("http://localhost:8066/course/updateCourse",_this.Inform).then(function (res) {
            alert('课程信息修改成功!')
            _this.updateFormVisible = false
            _this.findAll();
          }).catch(function (err) {
          })
        },
        /*删除课程*/
        handleDelete(id){
          let _this = this
          console.log(id)
          if(window.confirm('确定要删除课程吗？')){
            // 发送axios请求，根据查询一个
            this.$axios.post("http://localhost:8066/course/deletedById/"+id).then(function () {
              _this.findAll();
              alert("课程删除成功！")
            }).catch(function (err) {
              console.log(id)
              alert("删除失败,请联系管理员！")
            })
          }
        }
      },
      //初始化阶段 brforeCreate 内部事件 生命周期
      created(){
        this.findAll();
      }
    }
</script>

<style scoped>

</style>
